<template>
  <div class="app-main">
    <div class="search-box">
      <el-form :inline="true" :model="listParams" ref="searchForm">
        <search-form-box :show-more-btn="false">
          <template slot="showSearch">
            <el-form-item label="事由" prop="reason">
              <el-input v-model="listParams.reason" placeholder="事由" clearable></el-input>
            </el-form-item>
            <el-form-item label="金额" prop="amount_min">
              <el-input v-model="listParams.amount_min" placeholder="金额最小值" clearable></el-input>
            </el-form-item>
            <el-form-item label="至" prop="amount_max">
              <el-input v-model="listParams.amount_max" placeholder="金额最大值" clearable></el-input>
            </el-form-item>
            <el-form-item label="提交日期" prop="submit_time_min">
              <el-date-picker
                v-model="listParams.submit_time_min"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="至" prop="submit_time_max">
              <el-date-picker
                v-model="listParams.submit_time_max"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </template>
          <template slot="hideSearch">
          </template>
          <template slot="searchBtn">
            <el-form-item>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button @click="resetForm('searchForm')">重置</el-button>
            </el-form-item>
          </template>
        </search-form-box>
      </el-form>
    </div>
    <div class="table-box">
      <el-button v-if="!is_manage_page" type="primary" size="small" style="margin-bottom: 10px" @click="showAdd"
                 v-permission="'temporary_bill_add'"
      >申请暂支
      </el-button>
      <el-table :data="tableData" border style="width: 100%" v-loading="tableLoading">
        <el-table-column v-if="is_manage_page" label="提交人" prop="real_name" align="center"></el-table-column>
        <el-table-column label="受款人" width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.submit_time.substr(0, 10) }}
          </template>
        </el-table-column>
        <el-table-column label="日期" width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.submit_time.substr(0, 10) }}
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.flow_status == 3" size="mini">审核中</el-tag>
            <el-tag v-else-if="scope.row.flow_status == 4" type="success" size="mini">已通过</el-tag>
            <el-tag v-else-if="scope.row.flow_status == 0" type="danger" size="mini">已保存</el-tag>
            <el-tag v-else-if="scope.row.flow_status == 2" type="warning" size="mini">被退回</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="金额" width="120" align="center">
          <template slot-scope="scope">
            <span>￥{{ scope.row.amount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="reason" label="事由" min-width="300" header-align="center"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button @click="look(scope.row.id)" type="primary" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.page"
                   :page-sizes="[10,20,50,100, 200,400]" :page-size="listParams.page_size"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import SearchFormBox from '@/components/SearchFormBox'
export default {
  name: 'temporary_bill',
  components: { SearchFormBox },
  data() {
    return {
      listParams: {
        reason: null,
        quantity_min: null,
        quantity_max: null,
        amount_min: null,
        amount_max: null,
        submit_time_min: null,
        submit_time_max: null,
        flow_status: null,
        page: 1,
        page_size: 10
      },
      tableData: [],
      tableLoading: false,
      total: null
    }
  },
  computed: {
    is_manage_page() {
      return this.$route.name == 'temporary_bill_manage'
    }
  },
  created() {
    this.listParams.manager_scenes = this.$route.name == 'expense_general'
    this.getList()
  },
  methods: {
    handleSizeChange(val) {
      this.listParams.page_size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listParams.page = val
      this.getList()
    },
    getList() {
      // this.tableLoading = true
      // list(this.listParams).then(res => {
      //   if (res.code == 200) {
      //     this.tableLoading = false
      //     this.tableData = res.data.records
      //     this.total = res.data.total
      //   }
      // }).catch(() => {
      //   this.tableData = []
      //   this.tableLoading = false
      // })
    },
    search() {
      this.getList()
    },
    look(id) {
      this.$router.push(
        {
          name: 'reimbursement_info',
          params: {
            id: id
          }
        }
      )
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.getList()
    },
    showAdd() {
      this.$router.push(
        {
          name: 'temporary_bill_info',
          params: {
            is_created: true
          }
        }
      )
    }
  }
}
</script>

<style scoped>
.app-main {
  padding: 0 20px;
}

.search-box {
  margin-top: 10px;
}

.table-box {
  margin-bottom: 20px;
}
</style>
